<template>
	<view class="out-box">
		<!-- 中间分类 -->
		<view class="nav">
			<view class="nav_main">
				<view class="nav_main_item" @tap="show_shop(0)">
					<span :class="display_store == 0 ? 'nav_main_item_span ative':'nav_main_item_span'">转让</span>
					<view class="nav_main_item_bottom" v-show="display_store == 0"></view>
				</view>
				<view class="nav_main_item" @tap="show_shop(2)">
					<span :class="display_store == 2 ? 'nav_main_item_span ative':'nav_main_item_span'">求租</span>
					<view class="nav_main_item_bottom" v-show="display_store == 2"></view>
				</view>
			</view>
		</view>


		<!-- 最下方的数据展示 -->
		<view class="main">
			<view class="main_lists" v-if="display_store == 0">
				<image class="kongbaiimg" src="../../static/images/kongbai.png" v-if="page_information.shop_assemble == 0"></image>
				<scroll-view v-if="page_information.shop_assemble != 0" class="scroll-two" lower-threshold="20" scroll-y="true" @scrolltolower="load">
				<view v-if="page_information.shop_assemble != 0" v-for="item,index in transfer_list.value" :key="index">
					<view class="main_lists_item" @tap="todetails(item)">
						<view class="item_left">
							<image class="item_left_img" :src=item.cover_img></image>
						</view>
						<view class="item_right">
							<view class="item_right_one"><span class="spanone"
									v-show="item.is_swerve==1">(急转)</span>{{item.title}}</view>
							<span class="item_right_two">{{item.city+'|'+item.county+'|'+item.shop_area+"m²"}}</span><br>
							<view class="item_right_identifying"  v-if="item.feature_label!=null && item.feature_label!=''">
								<view v-for="item1,index1 in item.feature_label.split(',')" :key="index1">
									<view class="item_right_identifying_item">{{ item1}}</view>
								</view>
							</view>
							<span
								class="item_right_three">{{ ( item.rent == '' || item.rent == null ||item.rent == '面议' || item.rent =='null') ? '面议': item.rent + '/月' }}</span>
							<span class="item_right_five">更新于:{{ item.update_time==null?item.create_time:item.update_time }}</span>
						</view>
					</view>
					<view class="item_buttom" @tap.stop="unfollow(1,item.sid)">取消关注</view>
					<view class="item_hr"></view>
				</view>
				<view class="show_Loading" v-if="page_information.showLoading">{{page_information.showtext}}</view>
			</scroll-view>
			</view>
			<view class="main_listtwo" v-if="display_store == 2">
				<image class="kongbaiimg" src="../../static/images/kongbai.png" v-if="page_information.rent_assemble == 0"></image>
				<scroll-view class="scroll-two" v-if="page_information.rent_assemble != 0" lower-threshold="20" scroll-y="true" @scrolltolower="loadMoretwo">
				<view v-if="page_information.rent_assemble != 0" v-for="item,index in rent_list.value" :key="index">
					<view class="lists_item">
						<view class="item_left" @tap="toseeking(item)">
							<view class="item_left_one"><span class="spanone"
									v-show="item.is_swerve==1">（急租）</span>{{ item.title }}</view>
							<view class="item_right_identifying"  v-if="item.feature_label!=null && item.feature_label!=''">
								<view v-for="item1,index in item.feature_label.split(',')" :key="index1">
									<view class="item_right_identifying_item">{{ item1}}</view>
								</view>
							</view>
							<view class="item_left_two">联系人：{{ item.name }}</view>
							<view class="item_left_two">联系电话：{{item.phone}}</view>
						</view>
						<view class="item_right">
							<view class="item_right_center" @tap="unfollow(2,item.sid)">取消关注</view>
						</view>
					</view>
					<view class="item_hr"></view>
				</view>
				<view class="show_Loading" v-if="page_information.showLoadingtwo">{{page_information.showtexttwo}}</view>
			</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onBeforeMount,
		onMounted
	} from 'vue'
	import {
		onGotApiData
	} from '../../util/api.js'

	//获取上级页面带的参数
	const props = defineProps({
		obj: String,
	});
	
	// 在组件渲染之前执行
	onBeforeMount((aa) => {
		user_id.value = uni.getStorageSync('user_id');
		console.log('组件准备渲染', aa);
		//查询转让列表
		transfer_post();

	})
	// 在组件渲染完成后执行
	onMounted(() => {
		console.log('组件已经渲染完毕');
	})
	//开发时用的,后面换成props.userId
	let user_id = ref()
	// 转让店鋪列表
	let transfer_list = reactive([]);
	// 求租店鋪列表
	let rent_list = reactive([]);
	// 本页面信息
	let page_information = reactive({
		// 最新店铺的页数
		pageone: 1,
		// 求租店铺的页数
		pagetwo: 1,
		// 出租店铺上拉加载
		showLoading: false,
		// 求租店铺上拉加载
		showLoadingtwo: false,
		// 加载文字
		showtext: '加载更多店铺中...',
		// 加载文字
		showtexttwo: '加载更多店铺中...',
		// 店铺转让总条数
		shop_assemble: 0,
		// 当前条数
		objectCount: null,
		// 求租总条数
		rent_assemble: 0,
		// 当前条数
		rent_count: null
	})
	// 控制展示的变量
	const display_store = ref(0)
	//第一次点击item_right_one求租标识
	let isFirstRentClick = ref(true);
	// 点击切换展示列表(切换点击的话也是只执行一次)
	const show_shop = (num) => {
		display_store.value = num
		if (isFirstRentClick.value) {
			rent_post();
		}
		if (num == 2) {
			isFirstRentClick.value = false
		}
	}
	// 下拉刷新店铺转让页面
	const load = () => {
		
		console.log("buchulai")
      // 判断是否正在加载中，避免重复触发加载
      if (page_information.showLoading) {
        return;
      }
	     // 显示加载中提示
      page_information.showLoading = true
	//   计算当前数组有多少对象
	  page_information.objectCount = transfer_list.value.filter(item => typeof item === 'object').length;
	//   如果已加载全部直接返回
	  if( page_information.objectCount >= page_information.shop_assemble){
		console.log("比较",page_information.objectCount,page_information.shop_assemble)
		page_information.showtext = '没有更多数据了...'
			setTimeout(()=>{
					// 隐藏加载中提示
					page_information.showLoading = false; 
			},2000)
		return
	  }

	//   每次请求页数+1
	  page_information.pageone = page_information.pageone + 1
      // 模拟异步请求数据
      setTimeout(function(){
        // 获取到的新数据
		let params = reactive({
			page : page_information.pageone,
			size: 10,
			user_id: user_id.value
		})
		console.log("params",params)
		onGotApiData('/api/app/collect/page_list','GET',params,goto_lists)

        // 将新数据追加到数据列表中
      }, 1000);
		// 会员页面产品请求的结果
		const goto_lists = (result) => {
			console.log('分页列表',result)
			transfer_list.value.push(...result.list)
			console.log('goto_lists请求成功',transfer_list.value)
			// 隐藏加载中提示
			page_information.showLoading = false; 
		}
	}

	// 下拉刷新求租页面
	const loadMoretwo = () => {
      // 判断是否正在加载中，避免重复触发加载
      if (page_information.showLoadingtwo) {
        return;
      }
	     // 显示加载中提示
		 page_information.showLoadingtwo = true
		//   计算当前数组有多少对象
		page_information.rent_count = rent_list.value.filter(item => typeof item === 'object').length;
		//   如果已加载全部直接返回
	  if( page_information.rent_count >= page_information.rent_assemble){
		console.log("比较",page_information.rent_count,page_information.rent_assemble)
		page_information.showtexttwo = '没有更多数据了...'
			setTimeout(()=>{
					// 隐藏加载中提示
					page_information.showLoadingtwo = false; 
			},2000)
		return
	  }

	//   每次请求页数+1
	  page_information.pagetwo = page_information.pagetwo + 1
      // 模拟异步请求数据
      setTimeout(function(){
        // 获取到的新数据
		let params = reactive({
			page : page_information.pagetwo,
			size: 10,
			user_id: user_id.value
		})
		console.log("params",params)
		onGotApiData('/api/app/collect/page_list','GET',params,goto_lists)

        // 将新数据追加到数据列表中
      }, 1000);
		// 会员页面产品请求的结果
		const goto_lists = (result) => {
			console.log('分页列表',result)
			rent_list.value.push(...result.list)
			console.log('goto_lists请求成功',rent_list.value)
			// 隐藏加载中提示
			page_information.showLoadingtwo = false; 
		}
	}


	/**
	 * 请求转让列表接口
	 */
	const transfer_post = () => {
		let params = reactive({
			page: page_information.pageone,
			size: 10,
			user_id: user_id.value,
			type:1
		})
		console.log("params", params)
		onGotApiData('/api/app/collect/page_list', 'GET', params, transfer_value)
	}
	/**
	 * 转让列表请求的结果
	 */
	const transfer_value = (result) => {
		transfer_list.value = result.list
		// 总条数
		page_information.shop_assemble = result.total
		console.log('lists_value总条数', result.total)
		console.log('lists_value', result.total)
	}

	/**
	 * 求租列表请求
	 */
	const rent_post = () => {
		let params = reactive({
			page: page_information.pagetwo,
			size: 10,
			user_id: user_id.value,
			type:2
		})
		console.log("params", params)
		onGotApiData('/api/app/collect/page_list', 'GET', params, rent_value)
	}
	const rent_value = (result) => {
		rent_list.value = result.list
		// 总条数
		page_information.rent_assemble = result.total
		console.log('lists_value请', result.total)
	}
	







	// 收藏的转让店铺点击跳转详情
	const todetails = (item) =>{
		console.log("id",item.sid)
		// let obj = JSON.stringify(item)
		// uni.navigateTo({
		// 	url: '/pages/transfer/transfer?obj=' + encodeURIComponent(obj),
		// });
		uni.navigateTo({
			url: '/pages/transfer/transfer?id=' + `${item.sid}`,
		});
	}
	// 收藏的求租店铺点击跳转详情
	const toseeking = (item) =>{
		// let obj = JSON.stringify(item)
		// uni.navigateTo({
		// 	url: '/pages/search_shop/search_shop?obj=' + encodeURIComponent(obj),
		// });
		console.log("id",item.sid)
	// let obj = JSON.stringify(item)
	// uni.navigateTo({
	// 	url: '/pages/search_shop/search_shop?obj=' + encodeURIComponent(obj),
	// });
		uni.navigateTo({
			url: '/pages/search_shop/search_shop?id=' + `${item.sid}`,
		});
	}

	/**
	 * 取消关注
	 */
	const unfollow = (num,id) => {
		var url = "/api/app/collect/update";
	
		let params = reactive({
			sid: id,
			user_id: user_id.value,
			type:num,
			method_type:false
		})
		onGotApiData(url, 'POST', params, (result) => {
			//code=200,提示推广展示成功
			//刷新列表
			if (num == 1) {
				transfer_post()
			} else {
				rent_post();
			}
		})
	}
</script>

<style lang="scss" scoped>
	.out-box {
		min-height: 100vh;
		width: 100vw;
		max-width: 750rpx;
		margin: 0 auto;
		overflow: hidden;
		background-color: rgb(236, 235, 235);
		width: 750rpx auto;

		// 上方三个导航栏
		.nav {
			width: 100%;
			height: 90rpx;
			background-color: rgb(236, 235, 235);
			position: fixed;
			// top: 90rpx;
			z-index: 999;

			// border: 1px solid black;
			.nav_main {
				width: 750rpx;
				height: 90rpx;
				background-color: rgb(251, 250, 250);
				// margin-top: 100rpx;
				// border-radius: 20rpx;
				// padding-top: 10rpx;
				// padding-bottom: 10rpx;
				margin: 0 auto;
				display: flex;
				justify-content: space-around;

				.nav_main_item {
					width: 180rpx;
					height: 90rpx;
					// background-color: pink;
					text-align: center;

					// padding-top: 10rpx;
					// border-bottom: 10rpx solid orange;
					.nav_main_item_span {
						line-height: 30px;
						font-size: 17px;
						font-weight: 400;
					}

					.ative {
						color: rgb(255, 114, 64);
					}

					.nav_main_item_bottom {
						width: 140rpx;
						height: 10rpx;
						background-color: rgb(255, 114, 64);
						margin-left: 20rpx;
						border-radius: 4rpx;
						// box-shadow: 0 0 20rpx rgb(255, 114, 64);
					}
				}
			}
		}

		// 中间的内容
		.main {
			margin-top: 88rpx;
			width: 100%;
			font-family: '思源黑体';
			// min-height: 60vh;
			background-color: rgb(236, 235, 235);
			display: flex;
			justify-content: center;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			.main_lists {
				width: 750rpx;
				// height: 100rpx;
				// background-color: pink;
				background-color: #fff;
				.kongbaiimg{
					width: 720rpx;
					background-size: cover;
				}
				.main_lists_item {
					width: 720rpx;
					height: 220rpx;
					background-color: #fff;
					margin: 0 auto;
					// margin-bottom: 20rpx;
					display: flex;

					// border-radius: 20rpx;
					.item_left {
						width: 200rpx;
						height: 200rpx;
						// border: 1px solid black;
						margin-left: 10rpx;

						// background-image: url(https://img.72qq.com/file/202007/24/aed12b08ae.jpg);
						// background-size: 100% 100%;
						.item_left_img {
							height: 200rpx;
							width: 200rpx;
							border-radius: 20rpx;

						}
					}

					.item_right {
						width: 500rpx;
						height: 200rpx;
						margin-left: 10rpx;

						// border: 1px solid black;
						.item_right_one {
							font-size: 34rpx;
							margin-left: 15rpx;
							margin-top: 15rpx;
							font-weight: 600;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							.spanone {
								color: rgba(255, 87, 51, 1);
							}
						}

						.item_right_two {
							font-size: 24rpx;
							margin-left: 15rpx;
							line-height: 50rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}

						.item_right_identifying {
							width: 500rpx;
							height: 34rpx;
							display: flex;
							margin-top: 6rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							// margin-bottom: 16rpx;
							// border: 1px solid black;
							.item_right_identifying_item {
								// width: 120rpx;
								height: 30rpx;
								font-size: 12px;
								font-weight: 500;
								line-height: 30rpx;
								padding-left: 5rpx;
								padding-right: 5rpx;
								color: rgba(255, 141, 26, 1);
								margin-left: 14rpx;
								text-align: center;
								border: 1px solid rgba(255, 141, 26, 1);
								border-radius: 10rpx;
							}
						}

						.item_right_three {
							color: rgba(255, 87, 51, 1);
							font-size: 18px;
							margin-left: 10rpx;
							line-height: 80rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}

						.item_right_five {
							font-size: 12px;
							margin-left: 30rpx;
							color: rgb(163, 169, 175);
						}
					}
				}

				.item_buttom {
					width: 160rpx;
					height: 50rpx;
					margin: 10rpx 0 10rpx 550rpx;
					background-color: rgba(255, 87, 51, 1);
					border-radius: 10rpx;
					color: rgba(255, 255, 255, 1);
					font-size: 26rpx;
					line-height: 50rpx;
					text-align: center;
				}

				.item_hr {
					width: 700rpx;
					height: 2rpx;
					margin: 0 auto;
					border-top: 1px dashed rgba(207, 204, 204, 1);
				}
			}

			// 搜索店铺
			.main_listtwo {
				width: 750rpx;
				background-color: #fff;
				font-family: '思源黑体';
				.kongbaiimg{
					width: 720rpx;
					// height: 700rpx;
					background-size: cover;
				}
				.lists_item {
					width: 720rpx;
					height: 220rpx;
					background-color: #fff;
					margin: 0 auto;
					margin-bottom: 20rpx;
					display: flex;
					border-radius: 20rpx;

					.item_left {
						width: 500rpx;
						height: 200rpx;
						// border: 1px solid black;
						margin-left: 10rpx;

						.item_left_one {
							width: 490rpx;
							height: 60rpx;
							// background-color: pink;
							margin: 16rpx 0 0 10rpx;
							line-height: 60rpx;
							font-size: 32rpx;
							font-weight: 700;
							color: rgba(46, 46, 46, 1);
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							.spanone {
								color: rgba(255, 87, 51, 1);
							}
						}

						.item_left_two {
							width: 490rpx;
							height: 44rpx;
							margin: 4rpx 0 0 10rpx;
							// background-color: pink;
							line-height: 44rpx;
							font-size: 26rpx;
							font-weight: 400;
							color: rgb(88, 86, 86);
						}

						.item_right_identifying {
							width: 500rpx;
							height: 34rpx;
							display: flex;
							margin-top: 6rpx;
							margin-bottom: 16rpx;

							// border: 1px solid black;
							.item_right_identifying_item {
								// width: 120rpx;
								height: 30rpx;
								font-size: 12px;
								font-weight: 500;
								line-height: 30rpx;
								padding-left: 5rpx;
								padding-right: 5rpx;
								color: rgba(255, 141, 26, 1);
								margin-left: 14rpx;
								text-align: center;
								border: 1px solid rgba(255, 141, 26, 1);
								border-radius: 10rpx;
							}
						}
					}

					.item_right {
						width: 200rpx;
						height: 200rpx;
						margin-left: 10rpx;

						// border: 1px solid black;
						.item_right_center {
							width: 150rpx;
							height: 56rpx;
							margin: 150rpx 0 0 20rpx;
							border-radius: 10rpx;
							background: rgba(255, 87, 51, 1);
							font-size: 28rpx;
							color: #F5F5F5;
							line-height: 56rpx;
							text-align: center;
						}

					}
				}

				.item_hr {
					width: 700rpx;
					height: 2rpx;
					margin: 0 auto;
					border-top: 1px dashed rgba(207, 204, 204, 1);
				}
			}
		}
		.scroll-two{
			width: 100%;
			height: calc(100vh - 90rpx);
		}
		.show_Loading{
			height: 80rpx;
			text-align: center;
			// line-height: 80rpx;
		}
	}
</style>
